import React, { Component } from 'react'
import { Layout, Menu } from 'antd';
import routes from '../router/page'
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
import { NavLink } from 'react-router-dom';
import filterRoutes from '../components/filterRoutes'
import RouterView from '../router/RouterView'
import '../App.css'
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;


export default class Home extends Component {
    state = {
        leftList: filterRoutes(routes[2].children, sessionStorage.getItem('type')),
        // leftList: filterRoutes(routes[3].children, sessionStorage.getItem('type')),
        // leftList:[]
        type: sessionStorage.getItem('type'),
        username: sessionStorage.getItem('username'),
        img: sessionStorage.getItem('img')
    }

    render() {
        return (
            <div className='home'>
                <Layout>
                    <Header className="header">
                        <div className='logo'><h2>美洽后台管理系统</h2></div>

                        <div className="auth">
                            <img src={this.state.img} alt="" />
                            <li>
                                <span>{this.state.type}</span>
                                <span>{this.state.username}</span>
                            </li>

                        </div>
                    </Header>
                    <Content style={{ padding: '0 50px' }}>
                        <Layout className="site-layout-background" style={{ padding: '24px 0' }}>
                            <Sider className="site-layout-background" width={200}>
                                <Menu
                                    mode="inline"
                                    defaultSelectedKeys={['1']}
                                    defaultOpenKeys={['sub1']}
                                    style={{ height: '100%' }}
                                >
                                    <SubMenu key="sub1" icon={<UserOutlined />} title="科普管理">
                                        <Menu.Item key="1"><NavLink to="/home/hotstop">热点</NavLink></Menu.Item>
                                        {/* <Menu.Item key="2"><NavLink to="/home/sleep">睡眠</NavLink></Menu.Item> */}
                                        <Menu.Item key="3"><NavLink to="/home/topic">科普面板</NavLink></Menu.Item>
                                        <Menu.Item key="4"><NavLink to="/home/live">睡眠</NavLink></Menu.Item>
                                        {/* <Menu.Item key="5"><NavLink to="/home/woman">女性</NavLink></Menu.Item> */}
                                    </SubMenu>
                                    <SubMenu key="sub2" icon={<LaptopOutlined />} title="药品管理">
                                        {/* <Menu.Item key="6"><NavLink to='/home/skin'>药品面板</NavLink></Menu.Item>
                                        <Menu.Item key="7"><NavLink to='/home/pediatric'>儿科用药</NavLink></Menu.Item> */}
                                        <Menu.Item key="8"><NavLink to='/home/wife'>快速购药</NavLink></Menu.Item>
                                    </SubMenu>
                                    <SubMenu key="sub3" icon={<NotificationOutlined />} title="商城管理">
                                        <Menu.Item key="9"><NavLink to='/home/service'>商城列表</NavLink></Menu.Item>
                                        {/* <Menu.Item key="10"><NavLink to='/home/expert'>专家解答</NavLink></Menu.Item>
                                        <Menu.Item key="11"><NavLink to='/home/enquiry'>问询面板</NavLink></Menu.Item> */}
                                    </SubMenu>
                                </Menu>
                            </Sider>
                            <div>
                                <RouterView routes={this.props.routes} />
                            </div>
                        </Layout>
                    </Content>
                </Layout>
            </div>
        )
    }
}
